import { h, fragment } from '@knno/dom/jsx';
import { CheckCell } from '@knno/ui/jsx/richForm/checkCell';
import { TextCell } from '@knno/ui/jsx/richForm/textCell';
import { NumberCell } from '@knno/ui/jsx/richForm/numberCell';

import './richForm.css';
import { TimeCell } from '../../../dist/jsx/richForm/timeCell';

export function ShowRichForm() {
	return (
		<>
			<table>
				<tr>
					<CheckCell
						data={{}}
						field="check"
						textAlign="center"
						type="boolean"
						value={true}
						optional={true}
						onclick={function () {
							console.log(this.getValue());
						}}
					/>
					<CheckCell
						data={{}}
						field="check"
						textAlign="center"
						type="single"
						options={['选项1', '选项2', '选项3']}
						optional
						// onchange={function () {
						// 	console.log(this.getValue());
						// }}
						onclick={function () {
							console.log(this.getValue());
						}}
					/>
				</tr>
				<tr>
					<CheckCell
						colspan={2}
						value={['选项1', '选项2']}
						field="check"
						textAlign="center"
						type="multiple"
						options={['选项1', '选项2', '选项3']}
						onclick={function () {
							console.log(this.getValue());
						}}
					/>
				</tr>
				<tr>
					<TextCell colspan={2} maxLength={8} value="测试" />
				</tr>
				<tr>
					<TextCell
						colspan={2}
						multiline
						value="测试&#10;多行"
					/>
				</tr>
				<tr>
					<TextCell colspan={2} multiline maxLength={20} />
				</tr>
				<tr>
					<NumberCell precision={2} prefix="¥" suffix="元" value={123} />
				</tr>
				<tr>
					<TimeCell colspan={2} mode="dd" />
				</tr>
			</table>
		</>
	);
}
